function verticalMenu() {
    new vMenu('vmenubutton', 'vmenunav');
}

(function (window) {

    var menu, menubar;

    function vMenu(menuId, menubarId) {
        menu = document.getElementById(menuId);
        menubar = document.getElementById(menubarId);
        this._init();
        this._closeMenu();
    }


    vMenu.prototype = {
        _init: function () {
            this.isMenuOpen = true;
            this._initEvents();

            var self = this;
            this.bodyClickFn = function () {
                self._closeMenu();
                this.removeEventListener("click", self.bodyClickFn);
            };
        },
        _initEvents: function () {
            var self = this;

            menu.addEventListener('mouseover', function (ev) {
                self._openIconMenu();
            });

            menu.addEventListener('mouseout', function (ev) {
                self._closeIconMenu();
            });

            menubar.addEventListener('mouseover', function (ev) {
                self._openMenu();
                document.addEventListener('click', self.bodyClickFn);
            });

            menu.addEventListener('click', function (ev) {
                ev.stopPropagation();
                ev.preventDefault();
                if (self.isMenuOpen) {
                    self._closeMenu();
                    document.removeEventListener('click', self.bodyClickFn);
                }
                else {
                    self._openMenu();
                    document.addEventListener('click', self.bodyClickFn);
                }
            });

            menubar.addEventListener('click', function (ev) {
                ev.stopPropagation();
                self._closeMenu();

                // mantem estilo no atual selecionado
                var selected = document.getElementsByClassName('v-menu-item-selected')[0];

                if (selected) {
                    selected.classList.remove('v-menu-item-selected');
                }
                
                selected = ev.target.classList.contains('v-menu-item') ? ev.target : ev.target.parentElement;
                
                selected.classList.add('v-menu-item-selected');
            });
        },
        _openIconMenu: function () {
            menubar.classList.add('v-menu-open-part');
        },
        _closeIconMenu: function () {
            menubar.classList.remove('v-menu-open-part');
        },
        _openMenu: function () {
            if (this.isMenuOpen)
                return;
            menu.classList.add('v-menu-selected');
            this.isMenuOpen = true;
            menubar.classList.add('v-menu-open-all');
            this._closeIconMenu();
        },
        _closeMenu: function () {
            if (!this.isMenuOpen) {
                return;
            }
            menu.classList.remove('v-menu-selected');
            this.isMenuOpen = false;
            menubar.classList.remove('v-menu-open-all');
            this._closeIconMenu();
        }
    };

    // add to global namespace
    window.vMenu = vMenu;
})(window);
